<template>
	<view class="mine-pay" v-if="isLoad">
		<view
			class="flex-center flex-column fill-base mt-md ml-md mr-md pd-lg f-paragraph c-title box-shadow radius-24">
			<view class="flex-y-baseline f-sm-title">¥<view style="font-size: 60rpx;">{{orderInfo.pay_price}}</view>
			</view>
			<view>实付金额</view>
		</view>

		<view class="fill-base mt-md ml-md mr-md f-paragraph box-shadow radius-24"
			v-if="orderInfo.page_type == 'breed'">
			<view class="flex-between ml-md mr-md pl-sm pt-lg pb-lg">
				<view class="item-text">订单备注</view>
				<input v-model="text" type="text" class="flex-1 f-paragraph" maxlength="100"
					placeholder-class="c-placeholder" placeholder="请输入订单备注" />
			</view>
		</view>


		<view class="fill-base mt-md ml-md mr-md f-sm-title box-shadow radius-24">
			<view @tap.stop="toChangeItem(index)" class="flex-between ml-md mr-md pl-sm pr-sm pt-lg pb-lg b-1px-b"
				v-for="(item,index) in payList" :key="index">
				<view class="pay-item flex-y-center"><i class="iconfont mr-md" :class="[item.icon]"
						:style="{color:item.id==1?primaryColor:item.id==2?subColor:'#01AAF2'}"></i>
					<view class="flex-y-baseline">{{item.title}}
						<view class="f-paragraph c-caption ml-sm" v-if="item.id==2">余额{{userInfo.balance || 0}}元
						</view>
					</view>
				</view>
				<i class="pay-icon iconfont c-caption"
					:class="[{'icon-xuanze':payInd != index},{'icon-radio-fill':item.is_disabled || payInd == index}]"
					:style="{color:payInd==index?primaryColor:''}"></i>
			</view>
		</view>

		<view class="space-lg"></view>

		<auth :needAuth="userInfo && !userInfo.nickName" :must="true" @go="toPay">
			<view class="pay-btn flex-center f-title c-base radius" :style="{background:primaryColor}">立即支付</view>
		</auth>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import parser from "@/components/jyf-Parser/index"
	export default {
		components: {
			parser
		},
		data() {
			return {
				isLoad: false,
				options: {},
				// 1微信支付；2余额支付；3支付宝支付
				payList: [{
						id: 1,
						title: '微信支付',
						icon: 'icon-wechat-pay',
						is_disabled: false
					}
					// #ifdef APP-PLUS
					, {
						id: 3,
						title: '支付宝支付',
						icon: 'icon-alipay',
						is_disabled: false
					}
					// #endif
					, {
						id: 2,
						title: '余额支付',
						icon: 'icon-qianbao',
						is_disabled: false
					}
				],
				payInd: 0,
				// #ifdef APP-PLUS
				balanceInd: 2,
				// #endif
				// #ifndef APP-PLUS
				balanceInd: 1,
				// #endif
				text: '',
				tmplIds: [],
				lockTap: false,
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
			orderInfo: state => state.order.orderInfo,
		}),
		async onLoad() {
			this.$util.showLoading()
			this.initIndex()
		},
		methods: {
			...mapActions(['getUserInfo']),
			...mapMutations(['updateOrderItem']),
			async initIndex(flag = false) {
				await this.getUserInfo()
				let {
					balance
				} = this.userInfo
				let {
					pay_price,
					page_type,
					send_type = 0
				} = this.orderInfo

				let is_disabled = balance * 1 < pay_price * 1
				let {
					balanceInd
				} = this
				this.payList[balanceInd].is_disabled = is_disabled
				if (pay_price * 1 == 0) {
					this.payList[0].is_disabled = true
					// #ifdef APP-PLUS
					this.payList[1].is_disabled = true
					// #endif
					this.payInd = balanceInd
				}

				let tmplIds = []
				this.tmplIds = tmplIds
				this.isLoad = true
				this.$util.hideAll()
			},
			initRefresh() {
				this.initIndex(true)
			},
			toChangeItem(index) {
				if (index === 2 && this.payList[index].is_disabled) return
				this.payInd = index
			},
			async toPay() {
				// #ifdef MP-WEIXIN
				let that = this;
				let {
					tmplIds
				} = that
				if (tmplIds && tmplIds.length > 0) {
					uni.requestSubscribeMessage({
						tmplIds,
						complete(res) {
							that.toConfirmPay()
							console.log(res, "complete requestSubscribeMessage");
						}
					})
				} else {
					that.toConfirmPay()
				}
				// #endif
				// #ifndef MP-WEIXIN
				this.toConfirmPay()
				// #endif
			},
			async toConfirmPay() {
				let {
					payList,
					payInd,
					text = ''
				} = this
				let orderInfo = this.$util.deepCopy(this.orderInfo)
				let {
					page_type,
				} = orderInfo
				let {
					id: pay_model
				} = payList[payInd]
				let add_params = page_type == 'breed' ? {
					pay_model,
					text
				} : {
					pay_model
				}
				let param = Object.assign({}, orderInfo, add_params);
				delete param.pay_price
				delete param.page_type
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					let url = ['breed', 'claim_send', 'land_send'].includes(page_type) ? 1 : ''
					let openType = ['breed', 'claim_send', 'land_send'].includes(page_type) ? 'navigateBack' : ''
					let method_key = ['breed', 'claim_send'].includes(page_type) ? 'claim' : 'land'
					let method = {
						breed: 'breedOrder',
						claim_send: 'sendOrderApply',
						land_send: 'sendOrderApply',
					}
					let {
						pay_list
					} = await this.$api[method_key][method[page_type]](param)
					this.$util.hideAll()
					if (pay_list) {
						try {
							if (param.pay_model == 3) {
								pay_list = {
									orderInfo: pay_list,
									provider: 'alipay'
								}
							}
							await this.$util.pay(pay_list)
							this.$util.showToast({
								title: `支付成功`
							})
							if (page_type == 'breed') {
								this.updateOrderItem({
									key: 'haveOperItem',
									val: true
								})
							}
							setTimeout(() => {
								this.$util.back()
								console.log(url, openType, "===========")
								this.$util.goUrl({
									url,
									openType
								})
							}, 1000)
							this.lockTap = false
							return
						} catch (e) {
							this.$util.showToast({
								title: `支付失败`
							})
							setTimeout(() => {
								this.$util.back()
								this.$util.goUrl({
									url,
									openType
								})
							}, 1000)
							this.lockTap = false
							return
						}
					}
					this.$util.showToast({
						title: `支付成功`
					})
					if (page_type == 'breed') {
						this.updateOrderItem({
							key: 'haveOperItem',
							val: true
						})
					}
					setTimeout(() => {
						console.log(url, openType, "=========333==")
						this.$util.back()
						this.$util.goUrl({
							url,
							openType
						})
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			}
		}
	}
</script>


<style lang="scss">
	.mine-pay {
		.item-text {
			width: 150rpx;
		}

		.pay-item {
			.iconfont {
				font-size: 50rpx;
			}
		}

		.pay-icon {
			font-size: 40rpx;
		}

		.pay-btn {
			width: 622rpx;
			height: 94rpx;
			margin: 0 auto;
		}
	}
</style>
